﻿@model OnlineEducation.Models.ServerAPIModels.CreateMeeting


@{
    ViewData["Title"] = "试用教室";
    Layout = "_LayoutBlank";
}

@if (ViewData["error"] != null)
{
    <input type="hidden" id="error" value="@ViewData["error"].ToString()" />
}
@section Styles{
    <style>
        .social-list-item {
            font-size: 20px;
        }

        .mask {
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            background-color: #000;
            filter: alpha(opacity=70);
            -moz-opacity: 0.7;
            opacity: 0.7;
            z-index: 1;
        }

        .shareFre {
            position: absolute;
            top: 28%;
            left: 50%;
            margin-left: -56px;
            color: #fff;
            text-align: center;
            z-index: 10;
        }

        .arrow {
            position: absolute;
            right: 25px;
            top: 20px;
            z-index: 10;
        }

        #JweixinTip {
            display: none;
        }
        /* 判断iphone4-iphone4s */
        @@media screen and (device-aspect-ratio: 2/3) {
            .link {
                margin-top: 40px;
            }
        }
        /* 判断iphone6 */
        @@media only screen and (min-device-width: 375px) and (max-device-width: 667px) {
            .link {
                margin-top: 75px;
            }
        }
        /* 判断iphone6plus */
        @@media only screen and (min-device-width: 414px) and (max-device-width: 736px) {
            .link {
                margin-top: 105px;
            }
        }
    </style>
}
<div class="account-pages mt-5 mb-5">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8 col-lg-6 col-xl-5">
                <div class="card bg-pattern">

                    <div class="card-body p-4">

                        <div class="text-center w-75 m-auto">
                            <a href="index.html">
                                <span> <img src="/assets/images/logo-light.png" alt="" height="116"> </span>
                            </a>
                            <p class="text-muted mb-1 mt-1"> 请输入试用名</p>
                        </div>

                
                            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                            <div class="form-group mb-3">
                                <label asp-for="UserName">  </label>
                                <input class="form-control" type="text" required="" id="trailer_name" placeholder="输入您的邮箱或手机号">
                                <span asp-validation-for="UserName" class="text-danger"></span>
                            </div>

                            <div class="form-group mb-0 text-center">
                                <button class="btn btn-info btn-block" type="button" onclick="joinClassroom()"> 进入教室 </button>
                            </div>


                        <div class="text-center">
                            <h5 class="mt-3 text-muted"> 请使用<a href="https://www.google.com/chrome/">Chrome</a>或者<a>Safari</a>浏览器开始您的课程。</h5>
     
                        </div>

                    </div> <!-- end card-body -->
                </div>

            </div> <!-- end col -->
        </div>
        <!-- end row -->
    </div>
    <!-- end container -->
</div>
<div id="JweixinTip">
    <div class="mask"></div>
    <div id="iphone" class="shareFre">点击右上角"..." <br>然后点击"在Safari中打开"按钮</div>
    <div id="android" class="shareFre">点击右上角"..." <br>然后点击"在Safari中打开"按钮</div>
    <div class="arrow"><img src="~/assets/images/arrow.png" /></div>
</div>
@section Scripts {
    @await Html.PartialAsync("_ValidationScriptsPartial")
    <script>
       
        $(document).ready(function () {

            var error = $('#error').val();

            if (error) {
                ShowMessageError(error);
            }

            var ua = navigator.userAgent;

            var isWeixin = !!/MicroMessenger/i.test(ua);

            if (isWeixin) {

                document.getElementById('JweixinTip').style.display = 'block';
            }
            else {
                document.getElementById('JweixinTip').style.display = 'none';
            }
            console.log(browser.versions);
            var name = getQueryVariable("name");
            $('#trailer_name').val(name);
           
        });



        var browser = {
            versions: function () {
                var u = navigator.userAgent, app = navigator.appVersion;
                return {         //移动终端浏览器版本信息
                    trident: u.indexOf('Trident') > -1, //IE内核
                    presto: u.indexOf('Presto') > -1, //opera内核
                    webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
                    gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
                    mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
                    ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
                    android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
                    iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
                    iPad: u.indexOf('iPad') > -1, //是否iPad
                    webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
                };
            }(),
            language: (navigator.browserLanguage || navigator.language).toLowerCase()
        }

        var TrailerViewMeeting = function (Name, MeetingId) {
  
            this.Name = Name;
            this.MeetingId = MeetingId;
      
        }

        function joinClassroom() {
            // 进入教室，调用后台API进入教室
            var meetingId = getQueryVariable("meetingId");
            var name = getQueryVariable("name");
            if (name == "") {
                name = $('#trailer_name').val();
                if (name == "") {
                    ShowMessageError("名称不能为空");
                    return;
                }
            }
            $.ajax({
                url: "/Trailer/Join?meetingId=" + meetingId + "&name=" + name,
                type: "GET",
                success: function (data) {
                    var url = "http://elearning.futureinfo.cn/bigbluebutton/api/join?" + data.resurl;
                    window.open(url, "_blank");

                } 
            });

        }
        function getQueryVariable(variable) {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                if (pair[0] == variable) { return pair[1]; }
            }
            return "";
        }

    </script>
}
